﻿<template>
    <div>
        <el-form label-width="150px" :model="UpPrivateCarUtilityDB" ref="AddUsageRecordDB_refs">
            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="使用人" prop="UserId">
                        <el-select placeholder="请选择使用人" filterable v-model="UpPrivateCarUtilityDB.UserId" style="width:100%">
                            <el-option :value="0" label="请选择使用人"></el-option>
                            <el-option v-for="v in $store.state.AllUsers" v-if="v.InternshipState!=8" :label="v.UserName" :value="v.Id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="10" :offset="1">
                    <el-form-item label="过路费" prop="UserId">
                        <el-input v-model="UpPrivateCarUtilityDB.Parking"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="用途使用二选一" prop="State">
                        <el-select placeholder="用途使用" v-model="projecttype1" @change="projecttypeFc(1)" filterable style="width:100%">
                            <el-option :value="0" label="项目使用"></el-option>
                            <el-option v-for="v in AllProject" :label="v.ProjectName" :value="v.ProjectName"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="10" :offset="1">
                    <el-form-item label="用途使用二选一" prop="State">
                        <el-input v-model="projecttype2" @change="projecttypeFc(2)"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>





            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="车牌号" prop="CarId">
                        <el-input v-model="UpPrivateCarUtilityDB.LicensePlateNumber"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="10" :offset="1">
                    <el-form-item label="排量" prop="CarId">
                        <el-input v-model="UpPrivateCarUtilityDB.Displacement"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>



            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="初始公里数" prop="CarId">
                        <el-input v-model="UpPrivateCarUtilityDB.Strartkilometers"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="10" :offset="1">
                    <el-form-item label="终止公里数" prop="CarId">
                        <el-input v-model="UpPrivateCarUtilityDB.Endkilometers"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>



            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="开始日期" prop="Date">
                        <el-date-picker v-model="UpPrivateCarUtilityDB.Date"
                                        class="wmax"
                                        style=" width: 100%;"
                                        value-format="yyyy-MM-dd"
                                        type="date"
                                        placeholder="开始日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="10" :offset="1">
                    <el-form-item label="结束日期" prop="EndDate">
                        <el-date-picker v-model="UpPrivateCarUtilityDB.EndDate"
                                        class="wmax"
                                        value-format="yyyy-MM-dd"
                                        style=" width: 100%;"
                                        type="date"
                                        placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="10" :offset="1">
                    <el-form-item label="备注" prop="Note">
                        <el-input v-model="UpPrivateCarUtilityDB.Remarks"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="10" :offset="1">
                    <h2>
                        上传图片信息
                    </h2>
                    <el-form-item label="上传图片信息" prop="PostLevel">
                        <UploadFileF ref="AnotherData"
                                     :multiple="false"
                                     :another-data="AnotherData"
                                     :showfilelist="true"
                                     :upshow="false"
                                     content="上传图片信息"
                                     btnsize="medium"></UploadFileF>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col align="center">
                    <el-button type="success" @click="UpTicketrecordDBSave">立即提交</el-button>
                    <el-button type="success" @click="AddTicketrecordDBreset">重置</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>


    import UploadFileF from "../../UploadFileF";

    import * as publicjs from "/public/Scriput/Public"
    export default {
        name: "UpPrivateCarUtility",
        components: {
            UploadFileF,
        },
        props: {
            AllProject: {
                type: Array,
                required: true
            },
            UpPrivateCarUtilityDB: {
                type: Object,
                required: true
            },
        },
        data() {
            return {
                projecttype1: '',
                projecttype2: '',
                bxdiv: {
                    display: "none"
                },
                //文件上传参数
                AnotherData: {
                    FileType: 64,
                    id: 5,
                    Type: this.UpPrivateCarUtilityDB.id,
                    Single: false,
                },
            }
        },

        watch: {
            UpPrivateCarUtilityDB: function (val) {
                this.init(val)
            }
        },
        methods: {
            UpTicketrecordDBSave() {
                let loadding = this.openLoading();
                this.$http.post("VehicleManagement/UpPrivateCarUtilityDB", { privateCarUtilityModel: this.UpPrivateCarUtilityDB })
                    .then(res => {
                        loadding.close();
                        console.log(res);
                        if (res.data.bit) {
                            if (this.$refs['AnotherData'].fileList.length > 0) {
                                this.AnotherData.Type = res.data.Id;
                                this.$refs['AnotherData'].submitUpload()
                            }
                            this.$message.success("数据添加成功")
                            this.$parent.$parent.UpPrivateCarUtilityShow = false;
                            this.$parent.$parent.GettableDB();
                        } else {
                            this.$message.error("数据添加失败")
                        }

                    });
            },
            AddTicketrecordDBreset() {
                this.$refs["AddUsageRecordDB_refs"].resetFields();
            },
            projecttypeFc(id) {
                if (id == 1) {
                    this.projecttype2 = '';
                    this.UpPrivateCarUtilityDB.ProjectName = this.projecttype1;

                } else {
                    this.projecttype1 = '';
                    this.UpPrivateCarUtilityDB.ProjectName = this.projecttype2;
                }
            },
            init(val) {
                this.projecttype1 = val.ProjectName;
                this.projecttype2 = val.ProjectName;
            },
        },
    }
</script>
<style>
    .wmax {
        width: 100%;
    }

    .newinput {
        position: absolute;
        z-index: 2;
        width: 80%;
        border-right: 0px;
    }
</style>












